<template>
  <div class="container">
    <div class="item-box" v-for="(item, index) in list" :key="index">
      <span class="title-box">{{ item.label }}：</span>
      <span class="value-box">{{ item.value || "" }}</span>
    </div>
  </div>
</template>

<script>
import API from "@/api/employeeApiTwo";
export default {
  name: "",
  components: {},
  props: {
    row: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      list: []
    };
  },
  created() {
    this.init();
    this.getDetail();
  },
  mounted() {},
  methods: {
    init() {
      this.$emit("SetTitle", "员工详情");
      this.$emit("SetPageWidth", 1020);
      this.$emit("SetPageActions", [
        // {
        //   text: "确定",
        //   handle: () => {
        //     this.$emit("Close");
        //   }
        // },
        {
          text: "关闭",
          handle: () => {
            this.$emit("Close");
          }
        }
      ]);
    },
    getDetail() {
      API.getDetail(this.row).then(res => {
        console.log(res, "getDetail");
        if (res.code === 200) {
          let { colKeyList, colShowNameVoList, records } = res.data;
          let list = [];
          colShowNameVoList.forEach(item => {
            list.push({
              label: item.colName,
              value: records[0][item.colKey]
            });
          });
          this.list = list;
        }
      });
    }
  },
  computed: {},
  watch: {}
};
</script>

<style lang='less' scoped >
.container {
  display: flex;
  flex-wrap: wrap;
  .item-box {
    width: 46%;
    margin-bottom: 20px;
    margin-left: 20px;
    display: flex;
    .title-box {
      color: rgba(0, 0, 0, 0.847058823529412);
    }
    .value-box {
      flex: 1;
      color: rgba(0, 0, 0, 0.647058823529412);
    }
  }
}
</style>
